import { nextTick, defineAsyncComponent } from 'vue';
import type { App } from 'vue';
import * as svg from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { number } from 'echarts';
// 引入组件
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));

/**
 * 导出全局注册 element plus svg 图标
 * @param app vue 实例
 * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
 */
export function elSvg(app: App) {
	const icons = svg as any;
	for (const i in icons) {
		app.component(`ele-${icons[i].name}`, icons[i]);
	}
	app.component('SvgIcon', SvgIcon);
}

/**
 * 图片懒加载
 * @param el dom 目标元素
 * @param arr 列表数据
 * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
 */
export const lazyImg = (el: string, arr: EmptyArrayType) => {
	const io = new IntersectionObserver((res) => {
		res.forEach((v: any) => {
			if (v.isIntersecting) {
				const { img, key } = v.target.dataset;
				v.target.src = img;
				v.target.onload = () => {
					io.unobserve(v.target);
					arr[key]['loading'] = false;
				};
			}
		});
	});
	nextTick(() => {
		document.querySelectorAll(el).forEach((img) => io.observe(img));
	});
};
// 使用方法
// onMounted(() => {
// 	other.lazyImg('[data-lazy-img-list]', state.tableData.data);
// });

/**
 * 对象深克隆
 * @param obj 源对象
 * @returns 克隆后的对象
 */
export function deepClone(obj: EmptyObjectType) {
	let newObj: EmptyObjectType;
	try {
		newObj = obj.push ? [] : {};
	} catch (error) {
		newObj = {};
	}
	for (let attr in obj) {
		if (obj[attr] && typeof obj[attr] === 'object') {
			newObj[attr] = deepClone(obj[attr]);
		} else {
			newObj[attr] = obj[attr];
		}
	}
	return newObj;
}

/**
 * 判断是否是移动端
 */
export function isMobile() {
	if (
		navigator.userAgent.match(
			/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i
		)
	) {
		return true;
	} else {
		return false;
	}
}

// 防抖函数
type CallbackFn = (item?: any) => void
let timer: any = null
function debounce (Callback: CallbackFn, delay = 1000) {
	let firstClick: Boolean = !timer;
	if (firstClick) { // 第一次会执行
		Callback()
	}
	// 如果定时器存在清空定时器, 设置定时器，此时firstClick会变为false，规定时间后time才会为null
  timer != null ? ElMessage.warning('操作过于频繁，请耐心稍等...') && clearTimeout(timer) : null
  timer = setTimeout(() => {
		if(!firstClick) {
			Callback && Callback() //当有值才会执行
		}
  }, delay)
}
// 节流函数
let timers:any = null
function throttle (Callback: CallbackFn, delay = 1000) {
	// 如果定时器存在清空定时器, 设置定时器，此时firstClick会变为false，规定时间后time才会为null
	if (timers) {
		ElMessage.warning('正在执行，请耐心稍等...')
		return false
	}
  timers = setTimeout(() => {
		Callback && Callback() //当有值才会执行
		timers = null
  }, delay)
}

/**
 * 统一批量导出
 * @method elSvg 导出全局注册 element plus svg 图标
 * @method lazyImg 图片懒加载
 * @method deepClone 对象深克隆
 * @method isMobile 判断是否是移动端
 * @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
 */
const other = {
	elSvg: (app: App) => {
		elSvg(app);
	},
	lazyImg: (el: string, arr: EmptyArrayType) => {
		lazyImg(el, arr);
	},
	deepClone: (obj: EmptyObjectType) => {
		return deepClone(obj);
	},
	isMobile: () => {
		return isMobile();
	},
	debounce: (val:any, delay: number) => {
		return debounce(val, delay);
	},
	throttle: (val:any, delay: number) => {
		return throttle(val, delay);
	},
};

// 统一批量导出
export default other;
